<template>
  <div class="box">
    <header>
      <van-nav-bar title="详情页" left-arrow @click-left="$router.go(-1)" />
    </header>
    <section>
      <div class="imgs">
        <img :src="$store.state.shops.image" alt />
      </div>
      <!-- 详情 -->
      <div class="content">
        <p>{{$store.state.shops.name}}</p>
        <p>月售{{$store.state.shops.sellCount}} 好评率{{$store.state.shops.rating}}%</p>
        <div style="display: flex;justify-content: space-between;">
          <span class="dj">单价￥{{$store.state.shops.price}}</span>
          <p>
            <van-button @click="addshop($store.state.shops)">加入购物车</van-button>
          </p>
        </div>
      </div>
      <!-- 介绍 -->
      <div class="introduce">
        <h2>商品介绍</h2>
        <p>{{$store.state.shops.info}}</p>
      </div>
      <!-- 商品评价 -->
      <ul class="evailate">
        <li>
          <p class="evaluate">商品评价</p>
          <span class="all">全部(57)</span>
          <span class="recommend">推荐(47)</span>
          <span class="Blog">吐槽(10)</span>
        </li>
        <li style="display: flex;align-items: center;">
          <van-icon name="passed" style="margin-right:0.08rem;" />
          <p style="font-size:0.24rem;color:#93999f;">只看有内容的评价</p>
        </li>
        <li v-for="(item,key) in ratings" :key="key">
          <p
            style="display: flex; justify-content: space-between;margin:0.56rem 0 0.12rem 0;font-size:0.2rem;color:#93999f;"
          >
            <span>{{item.rateTime}}</span>
            <span style="margin-right:0.71rem;">{{item.username}}</span>
          </p>
          <p style="display: flex; ">
            <van-icon name="more" style="margin-right:0.08rem;" />
            <span style="font-size:0.24rem;color:#2c3238;">{{item.text}}</span>
          </p>
        </li>
      </ul>
    </section>
    <footer>
      <van-icon
        name="shopping-cart-o"
        color="#80858a"
        @click="flag=true"
        :badge="$store.getters.nums==0?null:$store.getters.nums"
      />
      <span>￥{{$store.getters.sums}}</span>
      <span>另需配送费￥4元</span>
      <span>￥20元起送</span>
    </footer>
    <!-- 购物车弹框 -->
    <van-popup v-model="flag" position="bottom" :style="{ height: '30%' }">
      <div class="cardtop">
        <span>购物车</span>
        <span @click="clean">清空</span>
      </div>
      <ul class="detail">
        <li v-for="(item,key) in $store.state.card" :key="key">
          <span style="font-size:0.28rem">{{item.name}}</span>
          <div style="display: flex;">
            <span
              style="margin-right:0.3rem; color:red; font-weight:700; font-size:0.21rem"
            >￥{{item.price}}</span>
            <span>
              <van-stepper theme="round" button-size="22" disable-input v-model="item.number" />
            </span>
          </div>
        </li>
      </ul>
    </van-popup>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 评价
      ratings: [],
      // 购物车弹框
      flag: false
    };
  },
  methods: {
    // 点击加入购物车
    addshop(i) {
      this.$store.commit("addShop", i);
    },
    // 点击清空
    clean(q) {
      this.$store.commit("clear", q);
    }
  },
  async mounted() {
    let { data: res } = await this.$http.get("/mock/data.json");
    console.log(res);
    this.ratings = res.ratings;
  }
};
</script>

<style lang="scss" scoped>
.imgs {
  width: 100%;
  height: 5rem;

  img {
    width: 100%;
    height: 100%;
  }
}

.content {
  padding-left: 0.36rem;
  height: 2.18rem;
  border-bottom: solid 2px #e6e7e8;
  .van-button {
    width: 1.88rem;
    height: 0.68rem;
    background: #00a0dc;
    font-size: 0.12rem;
    color: #fff;
    border-radius: 0.24rem;
    margin-right: 0.36rem;
  }
  p:nth-child(1) {
    font-size: 0.3rem;
    color: #07111b;
    font-weight: bold;
    margin: 0.36rem 0 0.16rem 0;
  }
  p:nth-child(2) {
    font-size: 0.18rem;
    color: #93999f;
    margin-bottom: 0.36rem;
  }
  .dj {
    font-size: 0.28rem;
    color: #f01414;
    font-weight: 700;
  }
}
.introduce {
  height: 2.51rem;

  border-bottom: solid 2px #e6e7e8;
  border-top: solid 2px #e6e7e8;
  margin: 0.32rem 0;
  h2 {
    font-size: 0.28rem;
    color: #07111b;
    margin: 0.36rem 0 0.12rem 0.36rem;
  }
  p {
    line-height: 1;
    font-size: 0.24rem;
    font-weight: 2rem;
    line-height: 0.48rem;
    margin: 0 0.52rem;
  }
}
.box {
  height: 100%;
  background: #f3f5f7;
}

.evailate {
  li {
    padding-left: 0.36rem;
    height: 1.98rem;
    border-top: solid 2px #e6e7e8;
    border-bottom: solid 2px #e6e7e8;
    .all,
    .recommend,
    .Blog {
      display: inline-block;
      width: 1.2rem;
      height: 0.64rem;
      background: #00a0dc;
      color: #ffffff;
      font-size: 0.24rem;
      line-height: 0.64rem;
      text-align: center;
    }
    .evaluate {
      padding: 0.36rem 0 0.36rem 0.36rem;
      font-size: 0.28rem;
    }
    .recommend {
      background: #ccecf8;
      margin: 0 0.16rem;
    }
    .Blog {
      background: #e9ebec;
    }
  }
}

section {
  height: 100%;
  overflow: auto;
}
footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0.96rem;
  background: #2f3031;
  display: flex;
  align-items: center;
  .van-icon {
    margin: 0 0.36rem;
    font-size: 0.4rem;
  }
  span:nth-child(2) {
    margin-right: 0.24rem;
    font-size: 0.32rem;
    color: #919396;
  }
  span:nth-child(3) {
    font-size: 0.32rem;
    font-weight: 400;
    color: #6a6e72;
    margin-right: 0.7rem;
  }
  span:nth-child(4) {
    width: 2.1rem;
    height: 100%;
    color: #979a9c;
    background: #2b333b;
    font-size: 0.24rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
// 购物车弹框
.cardtop {
  height: 0.78rem;
  background: #f3f5f7;
  border-bottom: solid 2px #dbdee1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  span:nth-child(1) {
    font-size: 0.28rem;
    font-weight: 200;
    color: #07111b;
  }
  span:nth-child(2) {
    font-size: 0.24rem;

    color: #3eade0;
  }
}
.detail {
  li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: solid 1px #dbdee1;
    margin: 0 0.36rem;
    height: 0.96rem;
  }
}
.van-popup {
  position: absolute;
  bottom: 0.96rem;
  left: 0;
}
</style>